<template>
  <view class="main">
    <view @click="goPage('/pages/myPage/myShippingAddress')">
      <view v-if="defaultAddressInfo?.userName" class="nameBox">
        <image class="img" src="../../../static/shop/dd.png" mode=""></image>
        <view class="nameInfo">
          <view class="f">
            <text>{{ defaultAddressInfo?.userName }}</text>
            {{ defaultAddressInfo.cell }}
          </view>
          <view class="s">{{ defaultAddressInfo.address }}</view>
        </view>
      </view>
      <view class="nameBox" v-else style="justify-content: center">点击前往添加</view>
    </view>
    <view class="bignameBox" v-for="(item, index) in info" :key="index">
      <view class="nameBox" style="margin-bottom: 0rpx">
        <image class="img2" :src="item?.picurl" mode=""></image>
        <view class="nameInfo box">
          <view class="f">{{ item?.title || "" }}</view>
          <!-- <view class="s">{{ info?.description }}</view> -->
          <view class="t" style="margin-top: 22rpx">
            <view class="l">x{{ item.goodSum }}</view>
            <view class="price">
              <text>￥</text>
              {{ item?.price }}
            </view>
          </view>
        </view>
      </view>
      <view class="shopBox">
        <view class="item">
          <view class="l">配送费:</view>
          <view class="r">{{ item?.carriage === "0.00" ? "免运费" : "￥" + item?.carriage }}</view>
        </view>
      </view>
      <view class="shopBox">
        <view class="item">
          <view class="l">商品总价:</view>
          <view class="r">￥{{ (item?.goodSum * item?.price + +item?.carriage).toFixed(2) }}</view>
        </view>
      </view>
    </view>
    <view class="bottomBox">
      <view class="l">
        合计：<view class="p"><text>￥</text> {{ getPrice() }}</view>
      </view>
      <u-button @click="submitOrder" type="primary" style="width: 300rpx" color="#71cec5">确认信息并支付</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";
import { selectDefaultAddressByUserId } from "@/api/my";
import { useStore } from "@/stores/counter";
import { createOrder, createOrderbyCar, YCcreateOrder } from "@/api/order";
const info = ref<any>();
const { type } = defineProps<{
  type: "putong" | "car" | "huiyuan";
}>();
onMounted(async () => {
  info.value = useStore().goodsInfo;
  info.value.map((i: any) => {
    i.carriage = i.carriage || "0.00";
  });
  console.log(info.value);
});
const getPrice = () => {
  if (info.value) {
    let price = 0;
    info.value.map((i: any) => {
      price += +i.price * +i.goodSum + +i.carriage;
    });
    return price;
  }
};
const defaultAddressInfo = ref<any>();
onShow(async () => {
  const res = await selectDefaultAddressByUserId({ userId: uni.getStorageSync("userId") });
  defaultAddressInfo.value = res;
});
const submitOrder = async () => {
  let errorMessage = "";
  if (!defaultAddressInfo.value?.userName) {
    errorMessage = "请添加收货地址";
  } else {
    errorMessage = "";
  }
  if (errorMessage) {
    // 显示错误消息
    uni.showToast({
      icon: "none",
      title: errorMessage,
    });
  } else {
    let res;
    if (type === "car") {
      res = await createOrderbyCar({
        userName: defaultAddressInfo.value.userName,
        cell: defaultAddressInfo.value.cell,
        address: defaultAddressInfo.value.address,
        gooIdLst: info.value.map((i: any) => i.goodId).join(","),
        userId: uni.getStorageSync("userId"),
      });
    } else if (type === "putong") {
      res = await createOrder({
        userName: defaultAddressInfo.value.userName,
        cell: defaultAddressInfo.value.cell,
        address: defaultAddressInfo.value.address,
        goodId: info.value[0].goodId,
        userId: uni.getStorageSync("userId"),
        goodSum: info.value[0].goodSum,
        specsNo: info.value[0].specsNo || "",
      });
    } else if (type === "huiyuan") {
      res = await YCcreateOrder({
        userName: defaultAddressInfo.value.userName,
        cell: defaultAddressInfo.value.cell,
        address: defaultAddressInfo.value.address,
        goodId: info.value[0].goodId,
        userId: uni.getStorageSync("userId"),
      });
    }

    useStore().setPayInfo({
      orderNo: res.orderNo,
      price: res.orderAmont,
      type,
    });
    uni.navigateTo({
      url: `/pages/payPage/payPage`,
    });
  }
};
</script>

<style lang="less" scoped>
.bignameBox {
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  background: #ffffff;
}
.nameBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
  .img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
  }
  .img2 {
    width: 144rpx;
    height: 144rpx;
    margin-right: 24rpx;
  }
  .nameInfo {
    width: calc(100% - 168rpx);
    .f {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
      line-height: 36rpx;
      text {
        margin-right: 24rpx;
      }
    }
    .s {
      font-size: 26rpx;
      color: #bebebe;
      line-height: 36rpx;
      margin-top: 8rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .l {
        font-size: 24rpx;
        color: #bebebe;
        line-height: 34rpx;
      }
      .price {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        line-height: 34rpx;
        text {
          font-size: 24rpx;
          font-weight: 500;
          margin-right: -15rpx;
        }
      }
    }
  }
}
.shopBox {
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 32rpx;
  .item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .l {
      font-size: 26rpx;
      color: #595959;
      line-height: 36rpx;
    }
    .r {
      font-size: 26rpx;
      font-weight: 500;
      color: #595959;
      line-height: 34rpx;
    }
  }
}
.bottomBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .l {
    width: calc(100% - 300rpx);
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #9694ae;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .p {
      font-size: 38rpx;
      color: #f15c5c;
      text {
        font-size: 24rpx;
        margin-right: -10rpx;
      }
    }
  }
}
.box {
  width: calc(100% - 168rpx);
}
.aa {
  display: flex;
  align-items: center;
}
.hbBox {
  height: 600rpx;
  overflow: auto;
  padding: 20rpx;
  .title {
    padding: 20rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
  }
}
</style>
